<template>
    <a-layout id="components-layout-demo-top-side">
        <a-layout-header class="header">
            <div class="logo"/>
            <a-menu
                    theme="dark"
                    mode="horizontal"
                    :default-selected-keys="['2']"
                    :style="{ lineHeight: '64px' }"
            >
                <a-menu-item key="1">
                    nav 1
                </a-menu-item>
                <a-menu-item key="2">
                    nav 2
                </a-menu-item>
                <a-menu-item key="3">
                    nav 3
                </a-menu-item>
            </a-menu>
        </a-layout-header>
        <a-layout-content style="padding: 0 50px">
            <a-breadcrumb style="margin: 16px 0">
                <a-breadcrumb-item>Home</a-breadcrumb-item>
                <a-breadcrumb-item>List</a-breadcrumb-item>
                <a-breadcrumb-item>App</a-breadcrumb-item>
            </a-breadcrumb>
            <a-layout style="padding: 24px 0; background: #fff">
                <a-layout-sider width="200" v-model="collapsed"style="background: #fff" :trigger="null" collapsible>
                    <div >
                        <a-menu
                                :default-selected-keys="['1']"
                                :default-open-keys="['sub1']"
                                mode="inline"
                                theme="dark"
                                :inline-collapsed="collapsed"
                                @click="selectMenu"
                        >
                            <a-menu-item key="/userMg">
                                <a-icon type="pie-chart" />
                                <span>用户列表</span>
                            </a-menu-item>
                            <a-menu-item key="/userTable">
                                <a-icon type="desktop" />
                                <span>用户表格</span>
                            </a-menu-item>
                            <a-menu-item key="3">
                                <a-icon type="inbox" />
                                <span>Option 3</span>
                            </a-menu-item>
                            <a-sub-menu key="sub1">
                                <span slot="title"><a-icon type="mail" /><span>echarts</span></span>
                                <a-menu-item key="/echarts01">
                                    echarts01
                                </a-menu-item>
                                <a-menu-item key="/ShanghaiStockIndex">
                                    上证指数
                                </a-menu-item>
                                <a-menu-item key="7">
                                    Option 7
                                </a-menu-item>
                                <a-menu-item key="8">
                                    Option 8
                                </a-menu-item>
                            </a-sub-menu>
                            <a-sub-menu key="sub2">
                                <span slot="title"><a-icon type="appstore" /><span>Navigation Two</span></span>
                                <a-menu-item key="9">
                                    Option 9
                                </a-menu-item>
                                <a-menu-item key="10">
                                    Option 10
                                </a-menu-item>
                                <a-sub-menu key="sub3" title="Submenu">
                                    <a-menu-item key="11">
                                        Option 11
                                    </a-menu-item>
                                    <a-menu-item key="12">
                                        Option 12
                                    </a-menu-item>
                                </a-sub-menu>
                            </a-sub-menu>
                        </a-menu>
                    </div>
                </a-layout-sider>
                <a-layout-header style="background: #fff; padding: 0">
                    <a-icon
                            class="trigger"
                            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                            @click="() => (collapsed = !collapsed)"
                    />
                </a-layout-header>

                <a-layout-content :style="{ padding: '0 24px', minHeight: '680px' }">
                    <router-view></router-view>
                </a-layout-content>
            </a-layout>
        </a-layout-content>
        <a-layout-footer style="text-align: center">
            Ant Design ©2018 Created by Ant UED
        </a-layout-footer>
    </a-layout>
</template>
<script>
  export default {
    data () {
      return {
        collapsed: false,
      }
    },
    methods: {
      toggleCollapsed () {
        this.collapsed = !this.collapsed
      },
      selectMenu(item){
        console.log(item.key)
        this.$router.push(item.key)
      }
    },
  }
</script>

<style>
    #components-layout-demo-top-side .logo {
        width: 120px;
        height: 31px;
        background: rgba(255, 255, 255, 0.2);
        margin: 16px 28px 16px 0;
        float: left;
    }
</style>
